<!--头部公共部分-->
{include file="common/header" /}
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>设置</a>
        <a>
          <cite>菜单管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
       href="/admin/auth/menu/pid/0" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i> </a>
</div>
<div id="wodekehu" class="x-body" class="clear:both;">
    <div class="layui-row"
         style="padding-left:20px;border-left:1px solid #e5e5e5;padding-top:20px;border-right:1px solid #e5e5e5;">
        <div class="layui-form layui-col-md12 x-so layui-form-pane">
            <a href="javascript:;" type="button" class="layui-btn layui-bg-blue" id="table-add"><i class="layui-icon">&#xe608;</i>新增菜单</a>
        </div>
    </div>
    <table class="layui-hide" id="LAY_table_user" lay-filter="table"></table>
    <script type="text/html" id="sortTable">
        <input class="layui-input" name="sort" style="height: 28px;" required="" lay-verify="required" placeholder="" autocomplete="off" type="text" id="change_sort_{{d.id}}" value="{{d.sort}}" data-url="/index.php/admin/auth/change_sort/id/{{d.id}}.html" onchange="change_sort({{d.id}})">
    </script>
    <script type="text/html" id="barTable">
        <a href="/admin/auth/menu/pid/{{d.id}}" class="layui-btn layui-btn-xs" style="background-color: #009688;">查看子菜单</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    </script>
</div>
<script src="/admin/js/jquery-1.8.3.min.js"></script>
<!--底部公共部分-->
{include file="common/footer" /}

<script>
    //修改排序值
    function change_sort(id){
        var sort = $("#change_sort_"+id).val();
        var _url = $("#change_sort_"+id).attr("data-url");
        $.ajax({
            type:'POST',
            url:_url,
            dataType: "json",
            data:{"sort":sort},
            success:function(result){
                console.log(result);
                if (result.code === 0) {
                    setTimeout(function () {
                        location.href = result.url;
                    }, 1000);
                }
                layer.msg(result.msg);
            }
        })
    }
    layui.use(['element', 'table', 'upload', 'layer', 'laytpl'], function () {
        var $ = layui.$,
            element = layui.element,
            table = layui.table,
            upload = layui.upload,
            layer = layui.layer,
            laytpl = layui.laytpl;
        $('#table-add').click(function () {
            var url = '{:url("auth/menu_add")}';
            layer.open({
                type: 2,
                title: '新增菜单',
                shadeClose: true,
                shade: 0.8,
                area: ['90%', '90%'],
                content: url
            });
        });

        //数据表格 方法级渲染
        var tableIns = table.render({
            elem: '#LAY_table_user',
            url: '/admin/auth/menu/pid/{$pid}',
            method: 'POST',
            cols: [[
                {field: 'sort', title: '排序', width: 100 ,sort: true,toolbar: '#sortTable', align: 'center'
                }, {field: 'title', title: '菜单名称', width: 200, align: 'center'
                }, {field: 'controller', title: '控制器名称', width: 200, align: 'center'
                }, {field: 'action', title: '方法名称', width: 300, align: 'center'
                }, {field: 'icon', title: '菜单图标', width: 180, align: 'center'
                }, {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barTable'
                }]],
            limit: 5,
            page: true,
            height: 'full-234',
            done: function (res, curr, count) {
                $("[data-field='id']").css('display','none');
                $("#parent_url").empty();
                $("#parent_url").append('<a href="javascript:;" class="option-show" data-id="1" >根节点</a>');
                $.each( res.parents, function(i, n){
                    $("#parent_url").append('<span lay-separator="">/</span><a  href="javascript:;" class="option-show" data-id="' + n.id + '" >'+ n.name+'</a>');
                    pid = n.id;
                });
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            }
        });
        //点击跳转到对应菜单
        $(document).on('click','.option-show',function(){
            let id = $(this).attr('data-id');
            layui.table.reload('operationTable', {
                where: {parent_id:id}
            });
        });
        //监听工具条
        table.on('tool(table)', function (obj) {
            var data = obj.data; //获得当前行数据
            console.log(data)
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看

            } else if (layEvent === 'del') { //删除

            } else if (layEvent === 'edit') {
                //编辑
                //do something
                var url = '{:url("auth/menu_edit")}?id=' + data.id;
                layer.open({
                    type: 2,
                    title: '修改',
                    shadeClose: true,
                    shade: 0.5,
                    area: ['90%', '90%'],
                    content: url
                });
            }
        });
    });
</script>